<template>
  <div class="pageBox">
    <head-component title="公告"></head-component>
    <div class="content">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div class="list">
          <div
            class="listItem flex"
            v-for="item in list"
            :key="item.id"
            @click="goDetails(item)"
          >
            <p>{{ item.title }}</p>
            <span>{{ item.time }}</span>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import headComponent from "../../components/headComponent.vue";
import router from "../../router";
import { post } from "../../untils/request";

export default defineComponent({
  components: {
    headComponent,
  },
  setup() {
    const page = ref(1);
    const lastId = ref(0);
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);

    function onLoad() {
      post("/portal", {
        module: "Content",
        interface: "3000",
        data: {
          page: page.value,
          lastId: lastId.value,
        },
      }).then((res) => {
        let datas = res.data.list;
        if (datas) {
          list.value = list.value.concat(datas);
          loading.value = false;
        }
        lastId.value = res.data.lastId;
        page.value = res.data.currentPage + 1;
        if (page.value > res.data.lastPage) {
          loading.value = false;
          finished.value = true;
        }
      });
    }

    function goDetails(param) {
      router.push({
        path: "/noticeDetails",
        query: {
          id: param.id,
        },
      });
    }
    return {
      page,
      lastId,
      list,
      loading,
      finished,
      onLoad,
      goDetails,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background: #fff;
  padding-top: 88px;
  .content {
    padding: 0 30px;
    .list {
      .listItem {
        padding: 30px 0 25px 0;
        flex-direction: column;
        border-bottom: 1px solid #f5f5f5;
        p {
          font-size: 30px;
          font-weight: 400;
          color: #333333;
          margin-bottom: 14px;
        }
        span {
          font-size: 26px;
          font-weight: 400;
          color: #999999;
        }
      }
    }
  }
}
</style>